<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useTeacherStore } from '@/stores/modules/teacherStore.js';
import { showFailToast, showSuccessToast } from 'vant';
import {
    reqStudioList,
    reqAllStudio,
    reqExportTable
} from '@/api/teacher/studio';

const teacherStore = useTeacherStore();

// 表格数据
const tableData = reactive([]);

const total = ref(0);

// 页数
const pageNo = ref(1);

// 获取工作室信息
const getStudioList = async () => {
    try {
        const result = await reqStudioList();

        const outerObj = result.data.resultMap;

        let arr = [];

        for (const key in outerObj) {
            // [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
            // ↓↓↓ 具体功能
            // [[1,2,3,4,5],[6,7,8,9,10],[11,12,13,14,15]]
            outerObj[key].reduce((flag, item) => {
                arr.push(item);
                if (flag === 5) {
                    tableData.push(arr);
                    arr = [];
                    flag = 0;
                }
                return ++flag;
            }, 1);
        }

        total.value = tableData.length;
    } catch (e) {
        console.error(e.message);
    }
};

// 获取所用工作室信息
const getAllStudio = async () => {
    const result = await reqAllStudio();

    console.log(result);
};

// 导出工作室表格
const exportTables = async () => {
    try {
        const result = await reqExportTable(teacherStore.teacherId);
        const blob = new Blob([result], { type: 'application/vnd.ms-excel' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = '工作室详情.xlsx';
        document.body.appendChild(a);
        a.click();
    } catch (e) {
        showFailToast(e.message);
    }
};

onMounted(async () => {
    if (teacherStore.teacherId == '1101') {
        showSuccessToast(
            `${teacherStore.teacherName}老师，您有权查看您所管理的工作室信息`
        );
    } else if (teacherStore.teacherId == '0498') {
        showSuccessToast(
            `${teacherStore.teacherName}老师，您有权查看您所管理的工作室信息`
        );
    }

    getStudioList();
    getAllStudio();
});
</script>

<template>
    <div class="container">
        <div class="title">学生校内实训情况</div>
        <div class="content">
            <el-table :data="tableData[pageNo]" stripe style="width: 100%">
                <el-table-column prop="stuName" width="80" label="名字" />
                <el-table-column prop="oldClassName" label="班级" />
                <el-table-column prop="className" label="所选工作室" />
                <el-table-column prop="postName" width="80" label="所选方向" />
            </el-table>
            <div class="pagination">
                <el-pagination
                    size="large"
                    background
                    layout="prev, pager, next"
                    :page-count="total"
                    @current-change="val => (pageNo = val - 1)"
                />
            </div>
            <div class="btn-wrapper">
                <el-button
                    type="primary"
                    size="large"
                    class="export-btn"
                    @click="exportTables"
                >
                    导出
                </el-button>
            </div>
        </div>
    </div>
</template>

<style scoped>
.container {
    background-color: rgb(247, 247, 247);
    font-size: 20rem;

    .title {
        font-weight: bold;
        margin: 10rem;
        text-align: center;
        color: rgb(80, 186, 170);
    }
}

.menu-item {
    font-size: 14rem;
}

.content {
    background-color: #fff;

    .pagination {
        padding: 10rem;
    }
}

.btn-wrapper {
    display: flex;
    justify-content: center;

    .export-btn {
        margin-top: 20rem;
        width: 80%;
    }
}
</style>
